<template>
	<div id="temp">
		<div class="stuInfo">
			<div class="tit">
				<span>员工详情</span>
				<span class="icon" @click="dialogFormVisible=true"></span>
				<div class="modification">
					<el-dialog :visible.sync="dialogFormVisible">
						<el-tabs v-model="activeName3">
							<el-tab-pane label="BASIC" name="first">
								<el-form v-model="studentDataForm" :label-width="formWidth">
									<el-row>
										<el-col :span="8">
											<el-form-item label="姓名">
												<el-input v-model="studentDataForm.name"></el-input>
											</el-form-item>
											<el-form-item label="联系电话">
												<el-input v-model="studentDataForm.tel"></el-input>
											</el-form-item>
											<el-form-item label="紧急联系人">
												<el-input v-model="studentDataForm.emergency"></el-input>
											</el-form-item>
											<el-form-item label="适任职务">
												<el-input v-model="studentDataForm.competency_post"></el-input>
											</el-form-item>
											<el-form-item label="教龄">
												<el-select v-model="studentDataForm.teach_time" filterable clearable>
													<el-option v-for="item in year" :key="item" :label="item" :value="item"></el-option>
												</el-select>
											</el-form-item>
										</el-col>
										<el-col :span="8">
											<el-form-item label="员工编号">
												<el-input v-model="studentDataForm.number"></el-input>
											</el-form-item>
											<el-form-item label="邮箱">
												<el-input v-model="studentDataForm.email"></el-input>
											</el-form-item>
											<el-form-item label="紧急联系人电话">
												<el-input v-model="studentDataForm.emergency_tel"></el-input>
											</el-form-item>
											<el-form-item label="海历时间">
												<el-select v-model="studentDataForm.sea_time" filterable clearable>
													<el-option v-for="item in year" :key="item" :label="item" :value="item"></el-option>
												</el-select>
											</el-form-item>
											<el-form-item label="教师等级">
												<el-input v-model="studentDataForm.teach_rank"></el-input>
											</el-form-item>
										</el-col>
										<el-col :span="8">
											<el-form-item label="外语能力">
												<el-input v-model="studentDataForm.language"></el-input>
											</el-form-item>
											<el-form-item label="现住址">
												<el-input v-model="studentDataForm.address"></el-input>
											</el-form-item>
											<el-form-item label="职务">
												<el-select v-model="studentDataForm.post"  filterable clearable>
													<el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.id"></el-option>
												</el-select>
											</el-form-item>
											<el-form-item label="船型">
												<el-select v-model="studentDataForm.crewtype" filterable clearable>
													<el-option v-for="item in crewList" :key="item.id" :label="item.type" :value="item.id"></el-option>
												</el-select>
											</el-form-item>
                      <el-form-item label="单位课酬">
												<el-input v-model="studentDataForm.teach_money"></el-input>
											</el-form-item>
										</el-col>
									</el-row>
								</el-form>
							</el-tab-pane>
							<el-tab-pane label="REMARKS" name="second">
								<el-form :label-width="formWidth">
									<el-row>
										<el-col :span="8">
											<el-form-item label="姓名(英文)">
												<el-input v-model="studentDataForm.ename"></el-input>
											</el-form-item>
											<el-form-item label="学历">
												<el-select v-model="studentDataForm.education" filterable clearable>
													<el-option v-for="item in education" :key="item" :label="item" :value="item"></el-option>
												</el-select>
											</el-form-item>
											<el-form-item label="毕业日期">
												<el-date-picker v-model="studentDataForm.date" type="date" placeholder="选择日期">
												</el-date-picker>
											</el-form-item>
											<el-form-item label="性别">
												<el-radio-group v-model="studentDataForm.sex">
													<el-radio label="男">男</el-radio>
													<el-radio label="女">女</el-radio>
												</el-radio-group>
											</el-form-item>
											<el-form-item label="婚姻状况">
												<el-radio-group v-model="studentDataForm.marriage">
													<el-radio label="已婚">已婚</el-radio>
													<el-radio label="未婚">未婚</el-radio>
													<el-radio label="离异">离异</el-radio>
												</el-radio-group>
											</el-form-item>
											<el-form-item label="到公司时间">
												<el-date-picker v-model="studentDataForm.come_time" type="date" placeholder="选择日期">
												</el-date-picker>
											</el-form-item>
											<el-form-item label="主攻课程">
												<el-input v-model="studentDataForm.course_main"></el-input>
											</el-form-item>
											<el-form-item label="外语语种">
												<el-input v-model="studentDataForm.foreign_language"></el-input>
											</el-form-item>
										</el-col>
										<el-col :span="8">
											<el-form-item label="专业">
												<el-input v-model="studentDataForm.major"></el-input>
											</el-form-item>
											<el-form-item label="最终学位">
												<el-input v-model="studentDataForm.degree"></el-input>
											</el-form-item>
											<el-form-item label="出生日期">
												<el-date-picker v-model="studentDataForm.birth" type="date" placeholder="选择日期">
												</el-date-picker>
											</el-form-item>
											<el-form-item label="工作经验">
												<el-input v-model="studentDataForm.work_experience"></el-input>
											</el-form-item>
											<el-form-item label="是否外聘">
												<el-radio-group v-model="studentDataForm.external">
													<el-radio label="是">是</el-radio>
													<el-radio label="否">否</el-radio>
												</el-radio-group>
											</el-form-item>
											<el-form-item label="合同开始时间">
												<el-date-picker v-model="studentDataForm.start_date" type="date" placeholder="选择日期">
												</el-date-picker>
											</el-form-item>
											<el-form-item label="可上课程">
												<el-input v-model="studentDataForm.course_can"></el-input>
											</el-form-item>
										</el-col>
										<el-col :span="8">
											<el-form-item label="毕业院校">
												<el-input v-model="studentDataForm.school"></el-input>
											</el-form-item>
											<el-form-item label="身份证号码">
												<el-input v-model="studentDataForm.idcard" @change="idcardChange"></el-input>
											</el-form-item>
											<el-form-item label="籍贯">
												<el-select v-model="studentDataForm.origin" filterable clearable>
													<el-option v-for="item in chuandongList.province" :key="item.ProID" :label="item.name" :value="item.name"></el-option>
												</el-select>
											</el-form-item>
											<el-form-item label="邮编">
												<el-input v-model="studentDataForm.code"></el-input>
											</el-form-item>
											<el-form-item label="海上经验">
												<el-input v-model="studentDataForm.sea_experience"></el-input>
											</el-form-item>
											<el-form-item label="合同终止时间">
												<el-date-picker v-model="studentDataForm.end_date" type="date" placeholder="选择日期">
												</el-date-picker>
											</el-form-item>
											<el-form-item label="课程授权">
												<el-input v-model="studentDataForm.course_authorization"></el-input>
											</el-form-item>
										</el-col>
									</el-row>
								</el-form>
							</el-tab-pane>
						</el-tabs>
						<div slot="footer" class="dialog-footer">
							<el-button type="primary" @click="changeStudent">提 交</el-button>
						</div>
					</el-dialog>
				</div>
			</div>
			<el-row>
				<el-col :span="7">
					<div>
						<el-col :span="10">
							<span class="left">姓名(中文)：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{studentData.name}}</span>
						</el-col>
					</div>
					<div>
						<el-col :span="10">
							<span class="left">联系电话：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{studentData.tel}}</span>
						</el-col>
					</div>
					<div>
						<el-col :span="10">
							<span class="left">紧急联系人：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{studentData.emergency}}</span>
						</el-col>
					</div>
					<div>
						<el-col :span="10">
							<span class="left">适任职务：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{studentData.competency_post}}</span>
						</el-col>
					</div>
					<div>
						<el-col :span="10">
							<span class="left">教龄：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{studentData.teach_time}}</span>
						</el-col>
					</div>
				</el-col>
				<el-col :span="7">
					<div>
						<el-col :span="10">
							<span class="left">员工编号：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{studentData.number}}</span>
						</el-col>
					</div>
					<div>
						<el-col :span="10">
							<span class="left">邮箱：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{studentData.email}}</span>
						</el-col>
					</div>
					<div>
						<el-col :span="10">
							<span class="left">紧急联系人电话：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{studentData.emergency_tel}}</span>
						</el-col>
					</div>
					<div>
						<el-col :span="10">
							<span class="left">海历时间：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{studentData.sea_time}}</span>
						</el-col>
					</div>
					<div>
						<el-col :span="10">
							<span class="left">教师等级：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{studentData.teach_rank}}</span>
						</el-col>
					</div>
				</el-col>
				<el-col :span="7">
					<div>
						<el-col :span="10">
							<span class="left">外语能力：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{studentData.language}}</span>
						</el-col>
					</div>
					<div>
						<el-col :span="10">
							<span class="left">现住址：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{studentData.address}}</span>
						</el-col>
					</div>
					<div>
						<el-col :span="10">
							<span class="left">职务：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{studentData.post_name}}</span>
						</el-col>
					</div>
					<div>
						<el-col :span="10">
							<span class="left">船型：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{studentData.crewtype_name}}</span>
						</el-col>
					</div>
          <div>
						<el-col :span="10">
							<span class="left">单位课酬：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{studentData.teach_money}}</span>
						</el-col>
					</div>
				</el-col>
				<el-col :span="3">
					<div class="headPic" style="cursor: pointer;">
						<el-upload class="avatar-uploader" :action="ImgAction" :data="{id:id}" :show-file-list="false" :on-success="handleAvatarSuccess" :on-progress = "handleAvatarUpload">
							<img v-if="imageUrl" :src="imageUrl" class="avatar">
							<img v-else src="../../../img/default.png" alt="">
						</el-upload>
					</div>
				</el-col>
			</el-row>
			<div class="remarks">
				<span class="icon icon1" v-show="flag" @click="isShow"></span>
				<span class="icon icon2" v-show="!flag" @click="isShow"></span>
				<span>REMARKS</span>
			</div>
			<div class="showBox" ref="showBox">
				<el-row>
					<el-col :span="7">
						<div>
							<el-col :span="10">
								<span class="left">姓名(英文)：</span>
							</el-col>
							<el-col :span="14">
								<span class="right">{{studentData.ename}}</span>
							</el-col>
						</div>
						<div>
							<el-col :span="10">
								<span class="left">学历：</span>
							</el-col>
							<el-col :span="14">
								<span class="right">{{studentData.education}}</span>
							</el-col>
						</div>
						<div>
							<el-col :span="10">
								<span class="left">毕业日期：</span>
							</el-col>
							<el-col :span="14">
								<span class="right">{{studentData.date}}</span>
							</el-col>
						</div>
						<div>
							<el-col :span="10">
								<span class="left">性别：</span>
							</el-col>
							<el-col :span="14">
								<span class="right">{{studentData.sex}}</span>
							</el-col>
						</div>
						<div>
							<el-col :span="10">
								<span class="left">婚姻状况：</span>
							</el-col>
							<el-col :span="14">
								<span class="right">{{studentData.marriage}}</span>
							</el-col>
						</div>
						<div>
							<el-col :span="10">
								<span class="left">到公司时间：</span>
							</el-col>
							<el-col :span="14">
								<span class="right">{{studentData.come_time}}</span>
							</el-col>
						</div>
						<div>
							<el-col :span="10">
								<span class="left">主攻课程：</span>
							</el-col>
							<el-col :span="14">
								<span class="right">{{studentData.course_main}}</span>
							</el-col>
						</div>
						<div>
							<el-col :span="10">
								<span class="left">外语语种：</span>
							</el-col>
							<el-col :span="14">
								<span class="right">{{studentData.foreign_language}}</span>
							</el-col>
						</div>
					</el-col>
					<el-col :span="7">
						<div>
							<el-col :span="10">
								<span class="left">专业：</span>
							</el-col>
							<el-col :span="14">
								<span class="right">{{studentData.major}}</span>
							</el-col>
						</div>
						<div>
							<el-col :span="10">
								<span class="left">最终学位：</span>
							</el-col>
							<el-col :span="14">
								<span class="right">{{studentData.degree}}</span>
							</el-col>
						</div>
						<div>
							<el-col :span="10">
								<span class="left">出生日期：</span>
							</el-col>
							<el-col :span="14">
								<span class="right">{{studentData.birth}}</span>
							</el-col>
						</div>
						<div>
							<el-col :span="10">
								<span class="left">工作经验：</span>
							</el-col>
							<el-col :span="14">
								<span class="right">{{studentData.work_experience}}</span>
							</el-col>
						</div>
						<div>
							<el-col :span="10">
								<span class="left">是否外聘：</span>
							</el-col>
							<el-col :span="14">
								<span class="right">{{studentData.external}}</span>
							</el-col>
						</div>
						<div>
							<el-col :span="10">
								<span class="left">合同开始日期：</span>
							</el-col>
							<el-col :span="14">
								<span class="right">{{studentData.start_date}}</span>
							</el-col>
						</div>
						<div>
							<el-col :span="10">
								<div class="left">
									<span>可上课程：</span>
								</div>
							</el-col>
							<el-col :span="14">
								<span class="right">{{studentData.course_can}}</span>
							</el-col>
						</div>
					</el-col>
					<el-col :span="7">
						<div>
							<el-col :span="10">
								<span class="left">毕业院校：</span>
							</el-col>
							<el-col :span="14">
								<span class="right">{{studentData.school}}</span>
							</el-col>
						</div>
						<div>
							<el-col :span="10">
								<span class="left">身份证号码：</span>
							</el-col>
							<el-col :span="14">
								<span class="right">{{studentData.idcard}}</span>
							</el-col>
						</div>
						<div>
							<el-col :span="10">
								<span class="left">籍贯：</span>
							</el-col>
							<el-col :span="14">
								<span class="right">{{studentData.origin}}</span>
							</el-col>
						</div>
						<div>
							<el-col :span="10">
								<span class="left">邮编：</span>
							</el-col>
							<el-col :span="14">
								<span class="right">{{studentData.code}}</span>
							</el-col>
						</div>
						<div>
							<el-col :span="10">
								<span class="left">海上经验：</span>
							</el-col>
							<el-col :span="14">
								<span class="right">{{studentData.sea_experience}}</span>
							</el-col>
						</div>
						<div>
							<el-col :span="10">
								<span class="left">合同终止日期：</span>
							</el-col>
							<el-col :span="14">
								<span class="right">{{studentData.end_date}}</span>
							</el-col>
						</div>
						<div>
							<el-col :span="10">
								<div class="left">
									<span>课程授权：</span>
								</div>
							</el-col>
							<el-col :span="14">
								<span class="right">{{studentData.course_authorization}}</span>
							</el-col>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
		<div class="record">
			<el-tabs type="border-card" @tab-click="formChange">
				<el-tab-pane label="员工简介" name="">
					<el-form :model="Summary" ref="summary">
						<div class="top">
							<el-form-item>
								<el-input type="textarea" :rows="5" v-model="Summary.intro" placeholder="请输入内容"></el-input>
							</el-form-item>
						</div>
						<el-form-item>
							<el-button type="primary" @click="changeIntro()">提交</el-button>
						</el-form-item>
					</el-form>
				</el-tab-pane>
				<el-tab-pane label="客户评估">
					<div id="myChart1" style="width:600px;height:400px;margin:0 auto"></div>
				</el-tab-pane>
				<el-tab-pane label="学员评估">
					<div id="myChart2" style="width:600px;height:400px;margin:0 auto"></div>
				</el-tab-pane>
				<el-tab-pane label="参加培训">
					<table class="list-table" name="join">
						<thead>
							<tr>
								<th width="15%">
									<el-button type="text" @click="JoinAdd()"><span class="icon add"></span></el-button>

									<el-dialog title="参加培训" :visible.sync="joinPop" size="tiny">
										<el-form :model="JoinData" :label-width="width" :rules="joinRules" ref="joinRulesName">
											<el-form-item label="培训主题" prop="topic">
												<el-col :span="15">
													<el-input v-model="JoinData.topic" auto-complete="off" placeholder="请输入"></el-input>
												</el-col>
											</el-form-item>
											<el-form-item label="培训时间">
												<el-col :span="15">
													<el-date-picker v-model="JoinData.date" placeholder="请选择" type="date" style="{width: 100%;}" auto-complete="off">
													</el-date-picker>
												</el-col>
											</el-form-item>
											<el-form-item label="证书名称" prop="name">
												<el-col :span="15">
													<el-input v-model="JoinData.name" auto-complete="off" placeholder="请输入"></el-input>
												</el-col>
											</el-form-item>
											<el-form-item label="有效期">
												<el-col :span="15">
													<el-input v-model="JoinData.validity" auto-complete="off" placeholder="请输入"></el-input>
												</el-col>
											</el-form-item>
											<el-form-item label="证书保管地点" class="sel">
												<el-col :span="15">
													<el-select v-model="JoinData.location" placeholder="请选择">
														<el-option label="本人" value="本人"></el-option>
														<el-option label="公司" value="公司"></el-option>
													</el-select>
												</el-col>
											</el-form-item>
										</el-form>
										<div slot="footer" class="dialog-footer">
											<el-button @click="joinPop = false">取 消</el-button>
											<el-button type="primary" @click="changeJoin">确 定</el-button>
										</div>
									</el-dialog>
								</th>
								<th>培训主题</th>
								<th>培训时间</th>
								<th>证书名称</th>
								<th>有效期</th>
								<th>证书保管地点</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item,index) in list">
								<td>
									<span class="icon edit" @click="Editjoin(item.id)"></span>
									<span class="icon del" @click="Deljoin(item.id)"></span>
								</td>
								<td>{{item.topic}}</td>
								<td>{{item.date}}</td>
								<td>{{item.name}}</td>
								<td>{{item.validity}}</td>
								<td>{{item.location}}</td>
							</tr>
						</tbody>
					</table>
				</el-tab-pane>
				<el-tab-pane label="月工作量">
          <el-dialog title="月工作量" :visible.sync="MonWorkPop" size="tiny">
            <el-form :model="MonWorkData" :rules="MonWorkRules" ref="MonWorkRulesName" :label-width="width">
              <el-form-item label="月份" prop="time">
                <el-col :span="15">
                  <el-date-picker v-model="MonWorkData.time" placeholder="请选择" type="month" style="width: 100%;" @change="getMonthWork">
                  </el-date-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="课时数" prop="class_hour">
                <el-col :span="15">
                  <el-input v-model="MonWorkData.class_hour" disabled></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="项目时数" prop="project_hour">
                <el-col :span="15">
                  <el-input v-model="MonWorkData.project_hour" disabled></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="其他">
                <el-col :span="15">
                  <el-input v-model="MonWorkData.other" placeholder="请输入"></el-input>
                </el-col>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="MonWorkPop = false">取 消</el-button>
              <el-button type="primary" @click="changeMonWork">确 定</el-button>
            </div>
          </el-dialog>
					<table class="list-table">
						<thead>
							<tr>
								<th>
									<el-button type="text" @click="MonWorkAdd"><span class="icon add"></span></el-button>


								</th>
								<th>时间</th>
								<th>课时数</th>
                <th>总课酬</th>
								<th>项目时数</th>
								<th>其他</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item,index) in list">
								<td>
									<span class="icon edit" @click="EditMonWork(item.id)"></span>
									<span class="icon del" @click="DelMonWork(item.id)"></span>
								</td>
								<td>{{item.time}}</td>
								<td>{{item.class_hour}}</td>
                <td>{{item.class_money}}</td>
								<td>{{item.project_hour}}</td>
								<td>{{item.other}}</td>
							</tr>
						</tbody>
					</table>
				</el-tab-pane>
				<el-tab-pane label="培训计划">
					<table class="list-table">
						<thead>
							<tr>
								<th>
									<el-button type="text" @click="TrainAdd"><span class="icon add"></span></el-button>

									<el-dialog title="培训计划" :visible.sync="TrainPop" size="tiny">
										<el-form :model="TrainData" :rules="TrainRules" ref="TrainRulesName" :label-width="width">
											<el-form-item label="培训主题" prop="topic">
												<el-col :span="15">
													<el-input v-model="TrainData.topic" auto-complete="off" placeholder="请输入"></el-input>
												</el-col>
											</el-form-item>
											<el-form-item label="时间">
												<el-col :span="15">
													<el-date-picker v-model="TrainData.time" placeholder="请选择" type="date" style="width: 100%;">
													</el-date-picker>
												</el-col>
											</el-form-item>
											<el-form-item label="地点" prop="site">
												<el-col :span="15">
													<el-input v-model="TrainData.site" auto-complete="off" placeholder="请输入"></el-input>
												</el-col>
											</el-form-item>
										</el-form>
										<div slot="footer" class="dialog-footer">
											<el-button @click="TrainPop = false">取 消</el-button>
											<el-button type="primary" @click="changeTrain">确 定</el-button>
										</div>
									</el-dialog>
								</th>
								<th>培训主题</th>
								<th>时间</th>
								<th>地点</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item,index) in list">
								<td>
									<span class="icon edit" @click="EditTrain(item.id)"></span>
									<span class="icon del" @click="DelTrain(item.id)"></span>
								</td>
								<td>{{item.topic}}</td>
								<td>{{item.time}}</td>
								<td>{{item.site}}</td>
							</tr>
						</tbody>
					</table>
				</el-tab-pane>
				<el-tab-pane label="奖惩记录">
					<el-tabs v-model="activeName" @tab-click="handleClick">
						<el-tab-pane label="奖励记录" name="Award">
							<table class="list-table">
								<thead>
									<tr>
										<th>
											<el-button type="text" @click="AwardAdd"><span class="icon add"></span></el-button>

											<el-dialog title="添加奖励记录" :visible.sync="AwardPop" size="tiny">
												<el-form :model="AwardData" :rules="AwardRules" ref="AwardRulesName" :label-width="width">
													<el-form-item label="时间" :label-width="width">
														<el-col :span="15">
															<el-date-picker v-model="AwardData.time" placeholder="请选择" type="date" style="width: 100%;">
															</el-date-picker>
														</el-col>
													</el-form-item>
													<el-form-item label="事由" :label-width="width" prop="particulars">
														<el-col :span="15">
															<el-input v-model="AwardData.particulars" auto-complete="off" placeholder="请输入"></el-input>
														</el-col>
													</el-form-item>
													<el-form-item label="奖励情况" :label-width="width" prop="condition">
														<el-col :span="15">
															<el-input v-model="AwardData.condition" auto-complete="off" placeholder="请输入"></el-input>
														</el-col>
													</el-form-item>
												</el-form>
												<div slot="footer" class="dialog-footer">
													<el-button @click="AwardPop = false">取 消</el-button>
													<el-button type="primary" @click="changeAward">确 定</el-button>
												</div>
											</el-dialog>
										</th>
										<th>序号</th>
										<th>时间</th>
										<th>事由</th>
										<th>奖励情况</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(item,index) in list">
										<td>
											<span class="icon edit" @click="EditAward(item.id)"></span>
											<span class="icon del" @click="DelAward(item.id)"></span>
										</td>
										<td>{{index + 1}}</td>
										<td>{{item.time}}</td>
										<td>{{item.particulars}}</td>
										<td>{{item.condition}}</td>
									</tr>
								</tbody>
							</table>
						</el-tab-pane>
						<el-tab-pane label="惩罚记录" name="Punishment">
							<table class="list-table">
								<thead>
									<tr>
										<th>
											<el-button type="text" @click="PunishmentAdd"><span class="icon add"></span></el-button>

											<el-dialog title="惩罚记录" :visible.sync="PunishmentPop" size="tiny">
												<el-form :model="PunishmentData" :rules="PunishRules" ref="PunishmentRulesName" :label-width="width">
													<el-form-item label="时间" :label-width="width">
														<el-col :span="15">
															<el-date-picker v-model="PunishmentData.time" placeholder="请选择" type="date" style="width: 100%;">
															</el-date-picker>
														</el-col>
													</el-form-item>
													<el-form-item label="事由" :label-width="width" prop="particulars">
														<el-col :span="15">
															<el-input v-model="PunishmentData.particulars" auto-complete="off" placeholder="请输入"></el-input>
														</el-col>
													</el-form-item>
													<el-form-item label="惩罚情况" :label-width="width" prop="condition">
														<el-col :span="15">
															<el-input v-model="PunishmentData.condition" auto-complete="off" placeholder="请输入"></el-input>
														</el-col>
													</el-form-item>
												</el-form>
												<div slot="footer" class="dialog-footer">
													<el-button @click="PunishmentPop = false">取 消</el-button>
													<el-button type="primary" @click="changePunish">确 定</el-button>
												</div>
											</el-dialog>
										</th>
										<th>序号</th>
										<th>时间</th>
										<th>事由</th>
										<th>惩罚情况</th>
									</tr>
								</thead>
								<tbody v-for="(item,index) in list">
									<tr>
										<td>
											<span class="icon edit" @click="DeitPunishment(item.id)"></span>
											<span class="icon del" @click="DelPunishment(item.id)"></span>
										</td>
										<td>{{index + 1}}</td>
										<td>{{item.time}}</td>
										<td>{{item.particulars}}</td>
										<td>{{item.condition}}</td>
									</tr>
								</tbody>
							</table>
						</el-tab-pane>
					</el-tabs>
				</el-tab-pane>
				<el-tab-pane label="家庭情况" name="Family">
					<table class="list-table">
						<thead>
							<tr>
								<th>
									<el-button type="text" @click="FamilyAdd"><span class="icon add"></span></el-button>

									<el-dialog title="家庭情况" :visible.sync="FamilyPop" size="tiny">
										<el-form :model="FamilyData" :rules="FamilyRules" ref="FamilyRulesName">
											<el-form-item label="姓名" :label-width="width" prop="name">
												<el-col :span="15">
													<el-input v-model="FamilyData.name" auto-complete="off" placeholder="请输入"></el-input>
												</el-col>
											</el-form-item>
											<el-form-item label="关系" :label-width="width" prop="relation">
												<el-col :span="15">
													<el-input v-model="FamilyData.relation" auto-complete="off" placeholder="请输入"></el-input>
												</el-col>
											</el-form-item>
											<el-form-item label="联系电话" :label-width="width">
												<el-col :span="15">
													<el-input v-model="FamilyData.phone" auto-complete="off" placeholder="请输入"></el-input>
												</el-col>
											</el-form-item>
										</el-form>
										<div slot="footer" class="dialog-footer">
											<el-button @click="FamilyPop = false">取 消</el-button>
											<el-button type="primary" @click="changeFamily">确 定</el-button>
										</div>
									</el-dialog>
								</th>
								<th>姓名</th>
								<th>关系</th>
								<th>联系电话</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item,index) in list">
								<td>
									<span class="icon edit" @click="EditFamily(item.id)"></span>
									<span class="icon del" @click="DelFamily(item.id)"></span>
								</td>
								<td>{{item.name}}</td>
								<td>{{item.relation}}</td>
								<td>{{item.phone}}</td>
							</tr>
						</tbody>
					</table>
				</el-tab-pane>
				<el-tab-pane label="上传文件">
					<table class="list-table">
						<thead>
							<tr>
								<th width="15%">
									<el-button type="text" @click="FildAdd"><span class="icon add"></span></el-button>

									<el-dialog title="上传文件" :visible.sync="dialogFormFile" size="tiny">
										<el-form :model="File" ref="File" label-width="150px">
											<el-form-item label="文件名">
												<el-col :span="15">
													<el-input type="text" v-model="File.name"></el-input>

												</el-col>
											</el-form-item>
											<el-form-item label="上传文件" prop="name">
												<el-col :span="15">
													<el-upload class="upload-demo" ref="upload" :action="fileAction" :on-change="fileUploadChange" :file-list="fileList" :auto-upload="false" :on-success="fileUploadSuccess" :on-remove="fileRemove" :data="uploadData">
														<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
													</el-upload>
												</el-col>
											</el-form-item>
										</el-form>
										<div slot="footer" class="dialog-footer">
											<el-button type="primary" @click="submitFile()" :disabled="subDisabled">提 交</el-button>
										</div>
									</el-dialog>
								</th>
								<th>文件名</th>
								<th>文件类型</th>
								<th>上传时间</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item,index) in list">
								<td>
									<span class="icon del"></span>
								</td>
								<td>{{item.name}}</td>
								<td>{{item.type}}</td>
								<td>{{item.time}}</td>
							</tr>
						</tbody>
					</table>
				</el-tab-pane>
				<el-tab-pane label="社保公积金">
					<el-tabs v-model="activeName2" @tab-click="handleClick2">
						<el-tab-pane label="社保" name="Insurance">
							<table class="list-table">
								<thead>
									<tr>
										<th>
											<el-button type="text" @click="InsuranceAdd"><span class="icon add"></span></el-button>

											<el-dialog title="社保情况" :visible.sync="InsurancePop" size="tiny">
												<el-form :model="InsuranceData" :rules="InsuranceRules" ref="InsuranceRulesName">
													<el-form-item label="开始缴费时间" :label-width="width">
														<el-col :span="15">
															<el-date-picker v-model="InsuranceData.start_time" placeholder="请选择" type="date" style="width: 100%;">
															</el-date-picker>
														</el-col>
													</el-form-item>
													<el-form-item label="缴费基数" :label-width="width" prop="cardinal">
														<el-col :span="15">
															<el-input v-model="InsuranceData.cardinal" auto-complete="off" placeholder="请输入"></el-input>
														</el-col>
													</el-form-item>
													<el-form-item label="缴费金额" :label-width="width" prop="money">
														<el-col :span="15">
															<el-input v-model="InsuranceData.money" auto-complete="off" placeholder="请输入"></el-input>
														</el-col>
													</el-form-item>
													<el-form-item label="员工承担部分" :label-width="width">
														<el-col :span="15">
															<el-input v-model="InsuranceData.staff_take" auto-complete="off" placeholder="请输入"></el-input>
														</el-col>
													</el-form-item>
													<el-form-item label="公司承担部分" :label-width="width">
														<el-col :span="15">
															<el-input v-model="InsuranceData.corporation_take" auto-complete="off" placeholder="请输入"></el-input>
														</el-col>
													</el-form-item>
												</el-form>
												<div slot="footer" class="dialog-footer">
													<el-button @click="InsurancePop = false">取 消</el-button>
													<el-button type="primary" @click="changeInsurance">确 定</el-button>
												</div>
											</el-dialog>
										</th>
										<th>开始缴费时间</th>
										<th>缴费基数</th>
										<th>缴费金额</th>
										<th>员工承担部分</th>
										<th>公司承担部分</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(item,index) in list">
										<td>
											<span class="icon edit" @click="EditInsurance(item.id)"></span>
											<span class="icon del" @click="DelInsurance(item.id)"></span>
										</td>
										<td>{{item.start_time}}</td>
										<td>{{item.cardinal}}</td>
										<td>{{item.money}}</td>
										<td>{{item.staff_take}}</td>
										<td>{{item.corporation_take}}</td>
									</tr>

								</tbody>
							</table>
						</el-tab-pane>
						<el-tab-pane label="公积金" name="Fund">
							<table class="list-table">
								<thead>
									<tr>
										<th>
											<el-button type="text" @click="FundAdd"><span class="icon add"></span></el-button>

											<el-dialog title="公积金情况" :visible.sync="FundPop" size="tiny">
												<el-form :model="FundData" :rules="FundRules" ref="FundRulesName">
													<el-form-item label="开始缴费时间" :label-width="width">
														<el-col :span="15">
															<el-date-picker v-model="FundData.start_time" placeholder="请选择" type="date" style="width: 100%;">
															</el-date-picker>
														</el-col>
													</el-form-item>
													<el-form-item label="缴费基数" :label-width="width" prop="cardinal">
														<el-col :span="15">
															<el-input v-model="FundData.cardinal" auto-complete="off" placeholder="请输入"></el-input>
														</el-col>
													</el-form-item>
													<el-form-item label="缴费金额" :label-width="width" prop="money">
														<el-col :span="15">
															<el-input v-model="FundData.money" auto-complete="off" placeholder="请输入"></el-input>
														</el-col>
													</el-form-item>
													<el-form-item label="员工承担部分" :label-width="width">
														<el-col :span="15">
															<el-input v-model="FundData.staff_take" auto-complete="off" placeholder="请输入"></el-input>
														</el-col>
													</el-form-item>
													<el-form-item label="公司承担部分" :label-width="width">
														<el-col :span="15">
															<el-input v-model="FundData.corporation_take" auto-complete="off" placeholder="请输入"></el-input>
														</el-col>
													</el-form-item>
												</el-form>
												<div slot="footer" class="dialog-footer">
													<el-button @click="FundPop = false">取 消</el-button>
													<el-button type="primary" @click="changeFund">确 定</el-button>
												</div>
											</el-dialog>
										</th>
										<th>开始缴费时间</th>
										<th>缴费基数</th>
										<th>缴费金额</th>
										<th>员工承担部分</th>
										<th>公司承担部分</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(item,index) in list">
										<td>
											<span class="icon edit" @click="EditFund(item.id)"></span>
											<span class="icon del" @click="DelFund(item.id)"></span>
										</td>
										<td>{{item.start_time}}</td>
										<td>{{item.cardinal}}</td>
										<td>{{item.money}}</td>
										<td>{{item.staff_take}}</td>
										<td>{{item.corporation_take}}</td>
									</tr>
								</tbody>
							</table>
						</el-tab-pane>
					</el-tabs>
				</el-tab-pane>
				<el-tab-pane label="福利">
					<table class="list-table">
						<thead>
							<tr>
								<th>
									<span class="icon add" @click="WelfareAdd"></span>

									<el-dialog title="福利情况" :visible.sync="WelfarePop" size="tiny">
										<el-form :model="WelfareData" :rules="WelfareRules" ref="WelfareRulesName">
											<el-form-item label="类型" :label-width="width" prop="type">
												<el-col :span="15">
													<el-input v-model="WelfareData.type" auto-complete="off" placeholder="请输入"></el-input>
												</el-col>
											</el-form-item>
											<el-form-item label="金额" :label-width="width" prop="money">
												<el-col :span="15">
													<el-input v-model="WelfareData.money" auto-complete="off" placeholder="请输入"></el-input>
												</el-col>
											</el-form-item>
											<el-form-item label="备注" :label-width="width">
												<el-col :span="15">
													<el-input v-model="WelfareData.remark" auto-complete="off" placeholder="请输入"></el-input>
												</el-col>
											</el-form-item>
										</el-form>
										<div slot="footer" class="dialog-footer">
											<el-button @click="WelfarePop = false">取 消</el-button>
											<el-button type="primary" @click="changeWelfare">确 定</el-button>
										</div>
									</el-dialog>
								</th>
								<th>类型</th>
								<th>金额</th>
								<th>备注</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item,index) in list">
								<td>
									<span class="icon edit" @click="EditWelfare(item.id)"></span>
									<span class="icon del" @click="DelWelfare(item.id)"></span>
								</td>
								<td>{{item.type}}</td>
								<td>{{item.money}}</td>
								<td>{{item.remark}}</td>
							</tr>
						</tbody>
					</table>
				</el-tab-pane>
        <el-tab-pane label="空置成本">
          <table class="list-table">
            <thead>
            <tr>
              <th width="20%">
                <span class="icon add" @click="VacancyAdd"></span>

                <el-dialog title="空置成本" :visible.sync="VacancyPop" size="tiny">
                  <el-form :model="VacancyData" :rules="VacancyRules" ref="VacancyRulesName" label-width="200px">
                    <el-form-item label="月份" prop="month">
                      <el-col :span="15">
                        <el-date-picker type="month" size="small" placeholder="选择月份" v-model="VacancyData.month"
                                        style="width: 100%;"></el-date-picker>
                      </el-col>
                    </el-form-item>
                      <el-form-item label="空置单价" prop="price">
                        <el-col :span="15">
                          <el-input v-model="VacancyData.price" size="small"  placeholder="请输入空置单价"></el-input>
                        </el-col>
                      </el-form-item>

                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="VacancyPop = false">取 消</el-button>
                    <el-button type="primary" @click="changeVacancy">确 定</el-button>
                  </div>
                </el-dialog>
              </th>
              <th>月份</th>
              <th>空置成本</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in list">
              <td>
                <span class="icon edit" @click="EditVacancy(item.id)"></span>
                <span class="icon del" @click="DelVacancy(item.id)"></span>
              </td>
              <td>{{item.month}}</td>
              <td>{{item.price}}</td>
            </tr>
            </tbody>
          </table>
        </el-tab-pane>
				<el-tab-pane label="员工备注">
					<table class="list-table">
						<thead>
							<tr>
								<th width="20%">
									<span class="icon add" @click="CommentAdd"></span>

									<el-dialog title="员工备注" :visible.sync="CommentPop" size="tiny">
										<el-form :model="CommentData" :rules="CommentRules" ref="CommentRulesName">
											<el-form-item label="备注" label-width="150px" prop="comment">
												<el-col :span="18">
													<el-input v-model="CommentData.comment" auto-complete="off" placeholder="请输入" type="textarea" :rows="5"></el-input>
												</el-col>
											</el-form-item>
										</el-form>
										<div slot="footer" class="dialog-footer">
											<el-button @click="CommentPop = false">取 消</el-button>
											<el-button type="primary" @click="changeComment">确 定</el-button>
										</div>
									</el-dialog>
								</th>
								<th>备注</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item,index) in list">
								<td>
									<span class="icon edit" @click="EditComment(item.id)"></span>
									<span class="icon del" @click="DelComment(item.id)"></span>
								</td>
								<td>{{item.comment}}</td>
							</tr>
						</tbody>
					</table>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
import "../../../assets/css/info.css";
import countryList from "../../../assets/js/data";

export default {
  data() {
    return {
      ImgPop: false,
      imageUrl: "",
      ImgAction: PATH + "Operation/staffEdit",
      joinRules: {
        topic: [
          {
            required: true,
            message: "请填写",
            trigger: "blur"
          }
        ],
        name: [
          {
            required: true,
            message: "请填写",
            trigger: "blur"
          }
        ]
      },
      MonWorkRules: {
        time: [{type:'date',required: true,message: "请选择月份",trigger: "change"}],

      },
      TrainRules: {
        topic: [
          {
            required: true,
            message: "请填写",
            trigger: "blur"
          }
        ],
        site: [
          {
            required: true,
            message: "请填写",
            trigger: "blur"
          }
        ]
      },

      AwardRules: {
        particulars: [
          {
            required: true,
            message: "请填写",
            trigger: "blur"
          }
        ],
        condition: [
          {
            required: true,
            message: "请填写",
            trigger: "blur"
          }
        ]
      },

      PunishRules: {
        particulars: [
          {
            required: true,
            message: "请填写",
            trigger: "blur"
          }
        ],
        condition: [
          {
            required: true,
            message: "请填写",
            trigger: "blur"
          }
        ]
      },

      FamilyRules: {
        name: [
          {
            required: true,
            message: "请填写",
            trigger: "blur"
          }
        ],
        relation: [
          {
            required: true,
            message: "请填写",
            trigger: "blur"
          }
        ]
      },

      FileRules: {
        name: [
          {
            required: true,
            message: "请填写",
            trigger: "blur"
          }
        ]
      },

      InsuranceRules: {
        cardinal: [
          {
            required: true,
            message: "请填写",
            trigger: "blur"
          }
        ],
        money: [
          {
            required: true,
            message: "请填写",
            trigger: "blur"
          }
        ]
      },

      FundRules: {
        cardinal: [
          {
            required: true,
            message: "请填写",
            trigger: "blur"
          }
        ],
        money: [
          {
            required: true,
            message: "请填写",
            trigger: "blur"
          }
        ]
      },

      WelfareRules: {
        type: [
          {
            required: true,
            message: "请填写",
            trigger: "blur"
          }
        ],
        money: [
          {
            required: true,
            message: "请填写",
            trigger: "blur"
          }
        ]
      },

      CommentRules: {
        comment: [
          {
            required: true,
            message: "请填写",
            trigger: "blur"
          }
        ]
      },
      VacancyRules: {
        month: [{type:'date',required: true,message: "请选择月份",trigger: "blur,change"}],
        price: [{required: true, message: '请输入空置单价', trigger: 'blur'}],
      },

      chuandongList: countryList,
      dialogFormVisible: false,
      formWidth: "120px",

      flag: true,
      tabLabel: "员工简介",
      tabName: "",
      activeName: "Award",
      activeName2: "Insurance",
      activeName3: "first",
      width: "200px",
      staffList: [],
      crewList: [],
      education: ["中专", "大专", "本科及以上"],
      year: ["一年以下", "一年以上三年以下", "三年以上五年以下", "五年以上"],

      clientPop: false,
      addClient: {
        desc: "",
        score: ""
      },

      studentPop: false,
      addStudent: {
        desc: "",
        score: ""
      },

      joinPop: false,
      JoinData: {
        topic: "",
        date: "",
        name: "",
        validity: "",
        location: ""
      },

      MonWorkPop: false,
      MonWorkData: {
        time: "",
        class_hour: "",
        project_hour: "",
        other: ""
      },

      TrainPop: false,
      TrainData: {
        topic: "",
        time: "",
        site: ""
      },

      AwardPop: false,
      AwardData: {
        time: "",
        particulars: "",
        condition: ""
      },

      PunishmentPop: false,
      PunishmentData: {
        time: "",
        particulars: "",
        condition: ""
      },

      FamilyPop: false,
      FamilyData: {
        name: "",
        relation: "",
        phone: ""
      },

      FilePop: false,
      File: {
        name: ""
      },

      InsurancePop: false,
      InsuranceData: {
        start_time: "",
        cardinal: "",
        money: "",
        staff_take: "",
        corporation_take: ""
      },

      FundPop: false,
      FundData: {
        start_time: "",
        cardinal: "",
        money: "",
        staff_take: "",
        corporation_take: ""
      },

      WelfarePop: false,
      WelfareData: {
        type: "",
        money: "",
        remark: ""
      },

      CommentPop: false,
      CommentData: {
        comment: ""
      },

      VacancyPop: false,
      VacancyData: {
        month: "",
        price: ""
      },

      Summary: {
        intro: ""
      },

      file: {
        name: ""
      },
      fileList: [],
      fileAction: PATH + "Operation/staffFileUpload",
      dialogFormFile: false,
      uploadData: {
        file: "",
        pid: ""
      },
      subDisabled: true,

      studentData: {},
      studentDataForm: {
        id: "",
        number: "",
        name: "",
        tel: "",
        email: "",
        address: "",
        emergency: "",
        emergency_tel: "",
        post: "",
        competency_post: "",
        sea_time: "",
        crewtype: "",
        teach_time: "",
        teach_rank: "",
        teach_money: "",
        language: "",
        education: "",
        major: "",
        school: "",
        date: "",
        degree: "",
        idcard: "",
        ename: "",
        marriage: "",
        sex: "",
        birth: "",
        origin: "",
        external: "",
        code: "",
        come_time: "",
        start_date: "",
        end_date: "",
        foreign_language: "",
        sea_experience: "",
        work_experience: "",
        course_main: "",
        course_can: "",
        course_authorization: "",
        img: ""
      },

      list: [],
      myChart1: {},
      myChart2: {},
      option: {
        title: {
          text: ""
        },
        // tooltip: {},
        toolbox: {
          show: true,
          right: 20,
          feature: {
            saveAsImage: {
              //保存图片
              show: true
            }
          }
        },
        legend: {
          data: []
        },
        radar: {
          name: {
            formatter: text => {
              text = text.replace(/\S{10}/g, function(match) {
                return match + "\n";
              });
              return text;
            },
            textStyle: {
              color: "#333"
            }
          },
          indicator: []
        },
        series: [
          {
            name: "客户反馈",
            type: "radar",
            label: {
              normal: {
                show: true,
                formatter: function(params) {
                  return params.value;
                }
              }
            },
            data: []
          }
        ]
      }
    };
  },

  created() {
    this.id = this.$route.params.id;
    this.fetchData();
    this.getStaffTypeList();
    this.getCrewList();
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    idcardChange(val){
      let patt = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      if (patt.test(val)) {
        this.studentDataForm.origin = _g.getProvince(val.substring(0,2))
        this.studentDataForm.birth = new Date(val.substring(6,10)+'/'+val.substring(10,12)+'/'+val.substring(12,14))
        this.studentDataForm.sex = val.substring(16,17)%2 == 0?'女':'男'
      }
    },
    handleAvatarUpload() {
      _g.openGlobalLoading();
    },

    handleAvatarSuccess(res, file) {
      _g.closeGlobalLoading();
      let remind = res.error ? "error" : "success";
      _g.toastMsg(remind, res.msg);
      if (!res.error) {
        this.imageUrl = res.url;
      }
    },

    formChange(item) {
      this.tabLabel = item.label;
      if (this.tabLabel === "参加培训") {
        this.getTraininglist();
      } else if (this.tabLabel === "月工作量") {
        this.getMonthWorklist();
      } else if (this.tabLabel === "培训计划") {
        this.getTrainlist();
      } else if (this.tabLabel === "奖惩记录") {
        this.activeName = "Award";
        this.getAwardlist();
      } else if (this.tabLabel === "家庭情况") {
        this.getFamilylist();
      } else if (this.tabLabel === "上传文件") {
        this.getFilelist();
      } else if (this.tabLabel === "社保金") {
        this.activeName = "Insurance";
        this.getInsurancelist();
      } else if (this.tabLabel === "福利") {
        this.getWelfarelist();
      } else if (this.tabLabel === "员工备注") {
        this.getCommentlist();
      } else if (this.tabLabel === "客户评估") {
        this.getCustomerFeedback();
      } else if (this.tabLabel === "学员评估") {
        this.getTraineeFeedback();
      }else if(this.tabLabel === "空置成本"){
        this.getVacancyList();
      }
    },

    handleClick(tab, event) {
      this.activeName = tab.name;
      eval("this.get" + tab.name + "list()");
    },

    handleClick2(tab, event) {
      this.activeName2 = tab.name;
      eval("this.get" + tab.name + "list()");
    },

    fetchData() {
      let data = {
        id: this.id
      };
      this.apiPost("Operation/staffDetail", data).then(res => {
        this.studentData = res;
        for (let k in this.studentDataForm) {
          this.studentDataForm[k] = res[k];
        }
        this.Summary.intro = res.intro;
      });
    },

    getStaffTypeList() {
      this.apiPost("System/staffTypeLists").then(res => {
        this.staffList = res;
      });
    },

    isShow() {
      this.flag = !this.flag;
      this.flag
        ? (this.$refs.showBox.style.height = 0)
        : (this.$refs.showBox.style.height = 320 + "px");
    },

    changeStudent() {
      this.dialogFormVisible = false;
      let data = this.studentDataForm;
      this.apiPost("Operation/staffEdit", data).then(res => {
        let remind = res.error ? "error" : "success";
        _g.toastMsg(remind, res.msg);
        if (!res.error) {
          this.fetchData();
        } else {
          this.dialogFormVisible = true;
        }
      });
    },

    getCrewList() {
      this.apiPost("System/crewLists").then(res => {
        this.crewList = res;
      });
    },

    getTraininglist() {
      let data = {
        id: this.id
      };
      this.apiPost("Operation/staffTraining", data).then(res => {
        this.list = res;
      });
    },

    getMonthWorklist() {
      let data = {
        id: this.id
      };
      this.apiPost("Operation/staffMonthWorkload", data).then(res => {
        this.list = res;
      });
    },

    getTrainlist() {
      let data = {
        id: this.id
      };
      this.apiPost("Operation/staffTrain", data).then(res => {
        this.list = res;
      });
    },

    getAwardlist() {
      let data = {
        id: this.id
      };
      this.apiPost("Operation/staffAward", data).then(res => {
        this.list = res;
      });
    },
    getPunishmentlist() {
      let data = {
        id: this.id
      };
      this.apiPost("Operation/staffPunishment", data).then(res => {
        this.list = res;
      });
    },

    getFamilylist() {
      let data = {
        id: this.id
      };
      this.apiPost("Operation/staffFamily", data).then(res => {
        this.list = res;
      });
    },

    getInsurancelist() {
      let data = {
        id: this.id
      };
      this.apiPost("Operation/staffInsurance", data).then(res => {
        this.list = res;
      });
    },

    getFundlist() {
      let data = {
        id: this.id
      };
      this.apiPost("Operation/staffFund", data).then(res => {
        this.list = res;
      });
    },

    getWelfarelist() {
      let data = {
        id: this.id
      };
      this.apiPost("Operation/staffWelfare", data).then(res => {
        this.list = res;
      });
    },

    getCommentlist() {
      let data = {
        id: this.id
      };
      this.apiPost("Operation/staffComment", data).then(res => {
        this.list = res;
      });
    },

    getFilelist() {
      let data = {
        id: this.id
      };
      this.apiPost("Operation/staffFile", data).then(res => {
        this.list = res;
      });
    },

    getCustomerFeedback() {
      this.myChart1.showLoading("default", { color: "#0177BF" });
      let data = {
        id: this.id
      };
      this.apiPost("Operation/staffCustomerFeedback", data).then(res => {
        this.myChart1.hideLoading();
        this.myChart1.setOption({
          radar: {
            indicator: res.indocator
          },
          series: [
            {
              data: res.data
            }
          ]
        });
      });
    },

    getTraineeFeedback() {
      this.myChart2.showLoading("default", { color: "#0177BF" });
      let data = {
        id: this.id
      };
      this.apiPost("Operation/staffTraineeFeedback", data).then(res => {
        this.myChart2.hideLoading();
        this.myChart2.setOption({
          radar: {
            indicator: res.indocator
          },
          series: [
            {
              data: res.data
            }
          ]
        });
      });
    },

    getVacancyList(){
      let data = {
        id: this.id
      };
      this.apiPost("Operation/staffVacancy", data).then(res => {
        this.list = res;
      });
    },

    changeIntro(formName) {
      let data = {
        id: this.id,
        intro: this.Summary.intro
      };
      this.apiPost("Operation/staffIntro", data).then(res => {
        let remind = res.error ? "error" : "success";
        _g.toastMsg(remind, res.msg);
      });
    },

    changeJoin() {
      this.$refs.joinRulesName.validate(valid => {
        if (valid) {
          let data = this.JoinData;
          data.staffid = this.id;
          this.joinPop = false;
          this.apiPost("Operation/staffTrainingEdit", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.getTraininglist();
            } else {
              this.joinPop = true;
            }
          });
        } else {
          return false;
        }
      });
    },

    Editjoin(id) {
      let data = {
        id: id
      };
      this.apiPost("Operation/staffTrainingDetail", data).then(res => {
        this.joinPop = true;
        setTimeout(() => {
          this.$refs.joinRulesName.resetFields();
          setTimeout(() => {
            this.JoinData = res;
          }, 0);
        }, 0);
      });
    },

    Deljoin(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            id: id
          };
          this.apiPost("Operation/staffTrainingDelete", data).then(res => {
            if (!res.error) {
              this.$message({
                type: "success",
                message: res.msg
              });
            } else {
              this.$message({
                type: "error",
                message: res.msg
              });
            }
            this.getTraininglist();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    changeVacancy() {
      this.$refs.VacancyRulesName.validate(valid => {
        if (valid) {
          let data = this.VacancyData;
          data.staffid = this.id;
          this.VacancyPop = false;
          this.apiPost("Operation/staffVacancyEdit", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.getVacancyList();
            } else {
              this.VacancyPop = true;
            }
          });
        } else {
          return false;
        }
      });
    },

    EditVacancy(id) {
      let data = {
        id: id
      };
      this.apiPost("Operation/staffVacancyDetail", data).then(res => {
        this.VacancyPop = true;
          this.$refs.VacancyRulesName.resetFields();
          setTimeout(() => {
            res.month = new Date(res.month.replace(/-/,"/"))
            this.VacancyData = res;
          }, 0);
      });
    },

    DelVacancy(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            id: id
          };
          this.apiPost("Operation/staffVacancyDelete", data).then(res => {
            if (!res.error) {
              this.$message({
                type: "success",
                message: res.msg
              });
            } else {
              this.$message({
                type: "error",
                message: res.msg
              });
            }
            this.getVacancyList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    changeMonWork() {
      this.$refs.MonWorkRulesName.validate(valid => {
        if (valid) {
          let data = this.MonWorkData;
          data.staffid = this.id;
          this.MonWorkPop = false;
          this.apiPost("Operation/staffMonthWorkloadEdit", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.getMonthWorklist();
            } else {
              this.MonWorkPop = true;
            }
          });
        } else {
          return false;
        }
      });
    },

    EditMonWork(id) {
      let data = {
        id: id
      };
      this.apiPost("Operation/staffMonthWorkloadDetail", data).then(res => {
        this.MonWorkPop = true;
        setTimeout(() => {
          this.$refs.MonWorkRulesName.resetFields();
          setTimeout(() => {
            res.time = new Date(res.time.replace(/-/,"/"))
            this.MonWorkData = res;
          }, 0);
        }, 0);
      });
    },

    DelMonWork(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            id: id
          };
          this.apiPost("Operation/staffMonthWorkloadDelete", data).then(res => {
            if (!res.error) {
              this.$message({
                type: "success",
                message: res.msg
              });
            } else {
              this.$message({
                type: "error",
                message: res.msg
              });
            }
            this.getMonthWorklist();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    changeTrain() {
      this.$refs.TrainRulesName.validate(valid => {
        if (valid) {
          let data = this.TrainData;
          data.staffid = this.id;
          this.TrainPop = false;
          this.apiPost("Operation/staffTrainEdit", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.getTrainlist();
            } else {
              this.TrainPop = true;
            }
          });
        } else {
          return false;
        }
      });
    },

    EditTrain(id) {
      let data = {
        id: id
      };
      this.apiPost("Operation/staffTrainDetail", data).then(res => {
        this.TrainPop = true;
        setTimeout(() => {
          this.$refs.TrainRulesName.resetFields();
          setTimeout(() => {
            this.TrainData = res;
          }, 0);
        }, 0);
      });
    },

    DelTrain(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            id: id
          };
          this.apiPost("Operation/staffTrainDelete", data).then(res => {
            if (!res.error) {
              this.$message({
                type: "success",
                message: res.msg
              });
            } else {
              this.$message({
                type: "error",
                message: res.msg
              });
            }
            this.getTrainlist();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    changeAward() {
      this.$refs.AwardRulesName.validate(valid => {
        if (valid) {
          let data = this.AwardData;
          data.staffid = this.id;
          this.AwardPop = false;
          this.apiPost("Operation/staffAwardEdit", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.getAwardlist();
            } else {
              this.AwardPop = true;
            }
          });
        } else {
          return false;
        }
      });
    },

    EditAward(id) {
      let data = {
        id: id
      };
      this.apiPost("Operation/staffAwardDetail", data).then(res => {
        this.AwardPop = true;
        setTimeout(() => {
          this.$refs.AwardRulesName.resetFields();
          setTimeout(() => {
            this.AwardData = res;
          }, 0);
        }, 0);
      });
    },

    DelAward(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            id: id
          };
          this.apiPost("Operation/staffAwardDelete", data).then(res => {
            if (!res.error) {
              this.$message({
                type: "success",
                message: res.msg
              });
            } else {
              this.$message({
                type: "error",
                message: res.msg
              });
            }
            this.getAwardlist();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    changePunish() {
      this.$refs.PunishmentRulesName.validate(valid => {
        if (valid) {
          let data = this.PunishmentData;
          data.staffid = this.id;
          this.PunishmentPop = false;
          this.apiPost("Operation/staffPunishmentEdit", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.getPunishmentlist();
            } else {
              this.PunishmentPop = true;
            }
          });
        } else {
          return false;
        }
      });
    },

    DeitPunishment(id) {
      let data = {
        id: id
      };
      this.apiPost("Operation/staffPunishmentDetail", data).then(res => {
        this.PunishmentPop = true;
        setTimeout(() => {
          this.$refs.PunishmentRulesName.resetFields();
          setTimeout(() => {
            this.PunishmentData = res;
          }, 0);
        }, 0);
      });
    },

    DelPunishment(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            id: id
          };
          this.apiPost("Operation/staffPunishmentDelete", data).then(res => {
            if (!res.error) {
              this.$message({
                type: "success",
                message: res.msg
              });
            } else {
              this.$message({
                type: "error",
                message: res.msg
              });
            }
            this.getPunishmentlist();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    changeFamily() {
      this.$refs.FamilyRulesName.validate(valid => {
        if (valid) {
          let data = this.FamilyData;
          data.staffid = this.id;
          this.FamilyPop = false;
          this.apiPost("Operation/staffFamilyEdit", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.getFamilylist();
            } else {
              this.FamilyPop = true;
            }
          });
        } else {
          return false;
        }
      });
    },

    EditFamily(id) {
      let data = {
        id: id
      };
      this.apiPost("Operation/staffFamilyDetail", data).then(res => {
        this.FamilyPop = true;
        setTimeout(() => {
          this.$refs.FamilyRulesName.resetFields();
          setTimeout(() => {
            this.FamilyData = res;
          }, 0);
        }, 0);
      });
    },

    DelFamily(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            id: id
          };
          this.apiPost("Operation/staffFamilyDelete", data).then(res => {
            if (!res.error) {
              this.$message({
                type: "success",
                message: res.msg
              });
            } else {
              this.$message({
                type: "error",
                message: res.msg
              });
            }
            this.getFamilylist();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    changeInsurance() {
      this.$refs.InsuranceRulesName.validate(valid => {
        if (valid) {
          let data = this.InsuranceData;
          data.staffid = this.id;
          this.InsurancePop = false;
          this.apiPost("Operation/staffInsuranceEdit", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.getInsurancelist();
            } else {
              this.InsurancePop = true;
            }
          });
        } else {
          return false;
        }
      });
    },

    EditInsurance(id) {
      let data = {
        id: id
      };
      this.apiPost("Operation/staffInsuranceDetail", data).then(res => {
        this.InsurancePop = true;
        setTimeout(() => {
          this.$refs.InsuranceRulesName.resetFields();
          setTimeout(() => {
            this.InsuranceData = res;
          }, 0);
        }, 0);
      });
    },

    DelInsurance(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            id: id
          };
          this.apiPost("Operation/staffInsuranceDelete", data).then(res => {
            if (!res.error) {
              this.$message({
                type: "success",
                message: res.msg
              });
            } else {
              this.$message({
                type: "error",
                message: res.msg
              });
            }
            this.getInsurancelist();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    changeFund() {
      this.$refs.FundRulesName.validate(valid => {
        if (valid) {
          let data = this.FundData;
          data.staffid = this.id;
          this.FundPop = false;
          this.apiPost("Operation/staffFundEdit", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.getFundlist();
            } else {
              this.FundPop = true;
            }
          });
        } else {
          return false;
        }
      });
    },

    EditFund(id) {
      let data = {
        id: id
      };
      this.apiPost("Operation/staffFundDetail", data).then(res => {
        this.FundPop = true;
        setTimeout(() => {
          this.$refs.FundRulesName.resetFields();
          setTimeout(() => {
            this.FundData = res;
          }, 0);
        }, 0);
      });
    },

    DelFund(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            id: id
          };
          this.apiPost("Operation/staffFundDelete", data).then(res => {
            if (!res.error) {
              this.$message({
                type: "success",
                message: res.msg
              });
            } else {
              this.$message({
                type: "error",
                message: res.msg
              });
            }
            this.getFundlist();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    changeWelfare() {
      this.$refs.WelfareRulesName.validate(valid => {
        if (valid) {
          let data = this.WelfareData;
          data.staffid = this.id;
          this.WelfarePop = false;
          this.apiPost("Operation/staffWelfareEdit", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.getWelfarelist();
            } else {
              this.WelfarePop = true;
            }
          });
        } else {
          return false;
        }
      });
    },

    EditWelfare(id) {
      let data = {
        id: id
      };
      this.apiPost("Operation/staffWelfareDetail", data).then(res => {
        this.WelfarePop = true;
        setTimeout(() => {
          this.$refs.WelfareRulesName.resetFields();
          setTimeout(() => {
            this.WelfareData = res;
          }, 0);
        }, 0);
      });
    },

    DelWelfare(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            id: id
          };
          this.apiPost("Operation/staffWelfareDelete", data).then(res => {
            if (!res.error) {
              this.$message({
                type: "success",
                message: res.msg
              });
            } else {
              this.$message({
                type: "error",
                message: res.msg
              });
            }
            this.getWelfarelist();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    changeComment() {
      this.$refs.CommentRulesName.validate(valid => {
        if (valid) {
          let data = this.CommentData;
          data.staffid = this.id;
          this.CommentPop = false;
          this.apiPost("Operation/staffCommentEdit", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.getCommentlist();
            } else {
              this.CommentPop = true;
            }
          });
        } else {
          return false;
        }
      });
    },

    EditComment(id) {
      let data = {
        id: id
      };
      this.apiPost("Operation/staffCommentDetail", data).then(res => {
        this.CommentPop = true;
        setTimeout(() => {
          this.$refs.CommentRulesName.resetFields();
          setTimeout(() => {
            this.CommentData = res;
          }, 0);
        }, 0);
      });
    },

    DelComment(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            id: id
          };
          this.apiPost("Operation/staffCommentDelete", data).then(res => {
            if (!res.error) {
              this.$message({
                type: "success",
                message: res.msg
              });
            } else {
              this.$message({
                type: "error",
                message: res.msg
              });
            }
            this.getCommentlist();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    fileUploadChange(file, fileList) {
      if (fileList.length > 1) {
        _g.toastMsg("warning", "每次限上传一个文件");
      }
      this.subDisabled = fileList.length == 1 ? false : true;
    },
    fileRemove(file, fileList) {
      this.subDisabled = fileList.length == 1 ? false : true;
    },
    fileUploadSuccess(res) {
      _g.closeGlobalLoading();
      let remind = res.error ? "error" : "success";
      _g.toastMsg(remind, res.msg);
      if (!res.error) {
        this.dialogFormFile = false;
        this.getFilelist();
      }
    },
    submitFile() {
      this.uploadData.file = this.File.name;
      this.uploadData.staffid = this.id;
      setTimeout(() => {
        this.$refs.upload.submit();
      }, 0);
    },

    JoinAdd() {
      this.JoinData = {
        topic: "",
        date: "",
        name: "",
        validity: "",
        location: ""
      };
      this.joinPop = true;
      setTimeout(() => {
        this.$refs.joinRulesName.resetFields();
      }, 0);
    },

    MonWorkAdd() {
      this.MonWorkData = {
        time: "",
        class_hour: "",
        project_hour: "",
        other: ""
      };
      this.MonWorkPop = true;
      setTimeout(() => {
        this.$refs.MonWorkRulesName.resetFields();
      });
    },

    TrainAdd() {
      this.TrainData = {
        topic: "",
        time: "",
        site: ""
      };
      this.TrainPop = true;
      setTimeout(() => {
        this.$refs.TrainRulesName.resetFields();
      });
    },

    AwardAdd() {
      this.AwardData = {
        time: "",
        particulars: "",
        condition: ""
      };
      this.AwardPop = true;
      setTimeout(() => {
        this.$refs.AwardRulesName.resetFields();
      });
    },

    PunishmentAdd() {
      this.PunishmentData = {
        time: "",
        particulars: "",
        condition: ""
      };
      this.PunishmentPop = true;
      setTimeout(() => {
        this.$refs.PunishmentRulesName.resetFields();
      });
    },

    FamilyAdd() {
      this.FamilyData = {
        name: "",
        relation: "",
        phone: ""
      };
      this.FamilyPop = true;
      setTimeout(() => {
        this.$refs.FamilyRulesName.resetFields();
      });
    },

    InsuranceAdd() {
      this.InsuranceData = {
        start_time: "",
        cardinal: "",
        money: "",
        staff_take: "",
        corporation_take: ""
      };
      this.InsurancePop = true;
      setTimeout(() => {
        this.$refs.InsuranceRulesName.resetFields();
      });
    },

    FundAdd() {
      this.FundData = {
        start_time: "",
        cardinal: "",
        money: "",
        staff_take: "",
        corporation_take: ""
      };
      this.FundPop = true;
      setTimeout(() => {
        this.$refs.FundRulesName.resetFields();
      });
    },

    WelfareAdd() {
      this.WelfareData = {
        type: "",
        money: "",
        remark: ""
      };
      this.WelfarePop = true;
      setTimeout(() => {
        this.$refs.WelfareRulesName.resetFields();
      });
    },

    CommentAdd() {
      this.CommentData = {
        comment: ""
      };
      this.CommentPop = true;
      setTimeout(() => {
        this.$refs.CommentRulesName.resetFields();
      });
    },

    VacancyAdd() {
      this.VacancyData = {
        month: "",
        price: "",
      };
      this.VacancyPop = true;
      setTimeout(() => {
        this.$refs.VacancyRulesName.resetFields();
      });
    },

    FildAdd() {
      this.File = {
        name: ""
      };
      this.fileList = [];
      this.dialogFormFile = true;
    },
    drawChart() {
      this.myChart1 = this.$echarts.init(document.querySelector("#myChart1"));
      this.myChart1.setOption(this.option);
      this.myChart2 = this.$echarts.init(document.querySelector("#myChart2"));
      this.myChart2.setOption(this.option);
    },
    getMonthWork(value){
      let data = {
        staff: this.id,
        time: value
      }
      this.apiPost('System/staffMonthWork',data).then(res=>{
        this.MonWorkData.class_hour = res.class_hour
        this.MonWorkData.project_hour = res.project_hour
      })
    }
  }
};
</script>

<style scoped>
.showBox .edit {
  background: url(../../../img/edit.gif) no-repeat;
}

.sel {
  text-align: left;
}

.top {
  margin-top: 14px;
}
</style>
